<template>
	<div class="wrap">
		<h1 class="title">双色球</h1>
		<view class="el-inp">
			<view class="el-txt">红码：</view>
			<view class="el-text">
				<input class="inp" v-model="redNum" :disabled="true" placeholder="红码" />
			</view>
		</view>
		<view class="el-inp">
			<view class="el-txt">蓝码：</view>
			<view class="el-text">
				<input class="inp" v-model="blueNum" :disabled="true" placeholder="蓝码" />
			</view>
		</view>
		<div class="el-inp">
			<span class="el-txt">结果：</span>
			<ul class="el-text">
				<li v-for="item in this.arr2" :key="item">{{item}}</li>
				<li class="blue" v-show="isRand">{{blueNum}}</li>
			</ul>
		</div>
		<button type="primary" class="lk-btn" @click="randFn">随机一注</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				redNum: '',
				blueNum: '',
				arr: [],
				arr2: [],
				isRand: false
			}
		},
		methods: {
			randFn() {
				// 红码
				this.arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
					26, 27,
					28, 29, 30, 31, 32, 33
				];
				this.arr2 = [];

				for (let i = 0; i < 6; i++) {
					let num = Math.random() * this.arr.length;
					num = parseInt(num);
					this.arr2.push(this.arr[num]);
					this.arr.splice(num, 1);
				}
				this.arr2.sort((a, b) => {
					return a - b
				})
				this.redNum = this.arr2.join(',  ');

				// 蓝码
				this.blueNum = parseInt(Math.random() * (16 - 1 + 1) + 1);
				this.isRand = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		background-image: url("/static/caipiao.jpeg");
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 100% 100%;
		position: relative;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			width: 100%;
			text-align: center;
			font-size: 50rpx;
			color: #fff;
			line-height: 96rpx;
			margin-bottom: 30rpx;
		}

		.el-inp {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-flow: row nowrap;
			border-radius: 6rpx;
			overflow: hidden;
			margin-bottom: 30px;

			.el-txt {
				background-color: #43768e;
				color: #fff;
				border: none;
				font-size: 32rpx;
				font-weight: 500;
				letter-spacing: 2px;
				height: 96rpx;
				line-height: 96rpx;
				padding: 0 20px;
			}

			.el-text {
				font-size: 32rpx;
				background-color: #fff;
				padding: 0 20rpx;
				flex: 1;
				list-style: none;
				height: 96rpx;
				line-height: 96rpx;

				.inp {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
				}

				li {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					border: 1rpx solid #f54646;
					list-style: none;
					text-align: center;
					line-height: 48rpx;
					display: inline-block;
					vertical-align: middle;
					margin-right: 13rpx;
					color: #f54646;
					font-size: 32rpx;

					&.blue {
						border: 1rpx solid #3ea1f4;
						color: #3ea1f4;
					}
				}
			}
		}

		.lk-btn {
			width: 200px;
			height: 48px;
			line-height: 48px;
			margin: 10px auto 10px;
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 2px;
			background-color: #43768e;
			border-radius: 8px;
			color: #fff;
			border: none;
			display: block;

			&:active {
				background-color: #315d71;
			}
		}
	}
</style>
